<template>
    <div class="emailRegister">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="cont">
            <h5>红粉宝宝整形</h5>
            <div class="reg-main">
                <p class="title">用户注册</p>
                <div class="phone" style="margin-left: 13px"><span>邮箱：</span><input type="text" placeholder="长度2~20个字符" ref="mobile"><a @click="phpne">手机注册</a></div>
                <div class="phone name"><span>昵称：</span><input type="text" placeholder="长度2~20个字符" ref="username"></div>
                <div class="phone pw"><span>密码：</span><input type="password" placeholder="长度2~20个字符和数字" ref="password"><a href="javascript:;">请输入密码长度为6~20位</a></div>
                <div class="phone repw"><span>重复密码：</span><input type="password" placeholder="密码"  ref="repassword"></div>
                <div class="verify"><span>验证码：</span><input type="text" placeholder="请输入验证码"><div class="auth-code">2KTn</div></div>
                <div class="verify mobver"><span>邮箱验证码：</span><input type="text" placeholder="请输入邮箱验证码"><button>获取验证码</button></div>
                <div class="already" @click="login">已有账号登录</div>
                <div class="reg"><button @click="register">注册</button></div>
                <div class="protocol"><Checkbox v-model="single">我已阅读同意 <a href="javascript:;">《红粉用户注册协议》</a></Checkbox></div>
                <div class="line"></div>
                <div class="reg-login">
                    <p class="reg-login-tit">您还可以用以下方式登录</p>
                    <ul>
                        <li><img src="../Login/img/weibo.png" alt=""><p>微博登录</p></li>
                        <li><img src="../Login/img/QQ.png" alt=""><p>微博登录</p></li>
                        <li><img src="../Login/img/weixin.png" alt=""><p>微博登录</p></li>
                    </ul>
                </div>
            </div>
        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "emaliRegister",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data(){
            return{
                single:false
            }
        },
        methods : {
            phpne() {
                this.$router.push({path: '/phoneregister'})
            },
            login() {
                this.$router.push({path: '/login'})
            },
            register() {

                let that = this
                // console.log(111)
                let reg = /^.{6,20}$/;
                let emails = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                let mobile = this.$refs.mobile.value;
                let username = this.$refs.username.value;
                let password = this.$refs.password.value;
                let repassword = this.$refs.repassword.value

                if (this.single == false) {
                    that.$Message.info('请先同意用户协议');
                } else if (username == '' || password == '' || repassword == '' || mobile == '') {
                    that.$Message.info('请填写完整信息');

                } else if (!emails.test(mobile)) {
                    that.$Message.info('邮箱格式错误');
                    // return false
                } else if (password != repassword) {
                    that.$Message.info('两次密码不一致');
                } else if (!reg.test(password)) {
                    that.$Message.info('密码长度为6到20位');

                }else {
                    this.$post('/api/user/register', {
                        username:username,
                        password:password,
                        repassword:repassword,
                        mobile:mobile,
                        code:666,
                        type:2
                    }, function (res) {
                        console.log(res)
                        that.$Message.info(res.msg);
                    }, function (errcode, errmsg) {
                        that.$Message.info(errmsg);

                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .cont{
        background-color: #FE91A5;
        padding-bottom: 30px;
        h5{
            color: #fff;
            background-color: #FE91A5;
            font-size: 28px;
            text-align: center;
            padding: 60px 0 24px 0;
        }
        .reg-main{
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            background-color: #fff;
            border-radius: 6px;
        }
        .phone{
            margin-left: 23px;
        }
        .title{
            font-size: 16px;
            color: #333333;
            padding: 34px 0 23px 0;
        }
        .phone span,.verify span{
            font-size: 14px;
            color: #333333;
            margin-right: 13px;
        }
        .reg-main input{
            padding-left: 10px;
        }
        .phone input{
            width: 228px;
            height: 32px;
        }
        .verify input{
            width: 138px;
            height: 32px;
        }
        .phone a{
            font-size: 12px;
            color: #ff5371;
            margin-left: 13px;
            text-decoration: underline;
        }
        .name{
            margin: 22px 0 0 -44px;
        }
        .pw{
            margin: 22px 0 0 105px;
        }
        .pw a{
            text-decoration: none;
        }
        .repw{
            margin: 22px 0 0 -72px;
        }
        .verify{
            margin: 22px 0 0 -6px;
        }
        .auth-code{
            width: 122px;
            height: 42px;
            display: inline-block;
            margin-left: 18px;
            padding-top: 11px;
            border: 1px solid #eeeeee;
            color: #568fc6;
        }
        .mobver{
            margin-left: -84px;
        }
        .mobver button{
            width: 84px;
            height: 32px;
            background-color: #ff5371;
            outline: none;
            border: none;
            color: #fff;
            margin-left:6px;
        }
        .already{
            margin: 19px 0 25px 173px;
            color:#ff8c25;
            cursor: pointer;
        }
        .reg button{
            outline: none;
            border: none;
            color: #fff;
            width: 228px;
            height: 40px;
            background-color: #ff5371;
            border-radius: 4px;
            font-size: 20px;
        }
        .protocol{
            margin: 14px 0 49px 0;
        }
        .protocol a{
            color: #FE5371;
        }
        .line{
            width: 600px;
            margin: 0 auto;
            border: .5px solid #f0f0f0;
        }
        .reg-login{
            width: 300px;
            height: 204px;
            margin: 0 auto;
            overflow: hidden;
        }
        .reg-login .reg-login-tit{
            color: #333333;
            font-size: 16px;
            margin: 29px 0 27px 0;
        }
        .reg-login ul li{
            float: left;
        }
        .reg-login ul li p{
            margin-top: 3px;
        }
        .reg-login ul li:nth-child(2){
            margin: 0 58px;
        }

    }
</style>